<template>
  <div class="cost-summary">
    <ProTable
      immediate
      :search-form="formList"
      :columns="columns"
      :request="getCostSummary"
      :before-search-submit="beforeSearchSubmit"
    >
      <template #extra>
        <Button type="primary" @click="exportExcel">导出</Button>
      </template>
    </ProTable>
  </div>
</template>

<script>
import { omit } from 'lodash'
import ProTable from '@/components/ProTable';
import { getCostSummary } from '@/api/statement';
import { getDateRangeTimestamp } from '@/utils/date'

export default {
  components: {
    // Button,

    ProTable
  },
  data() {
    return {
      formList: [
        {
          type: 'range',
          name: 'date',
          label: '跳转周期',
          value: '',
          props: {
            placeholder: '请选择',
            format: 'yyyy年MM月dd日'
          }
        },
        {
          type: 'select',
          name: 'scene',
          label: '场景',
          value: '',
          props: {
            placeholder: '请选择',
            optionList: [
              {
                value: '01',
                label: '场景一'
              },
              {
                value: '02',
                label: '场景二'
              },
              {
                value: '03',
                label: '场景三'
              },
              {
                value: '04',
                label: '场景四'
              }
            ]
          }
        },
        {
          type: 'select',
          name: 'type',
          label: '收入确认类型',
          value: '',
          props: {
            placeholder: '请选择',
            optionList: [
              {
                value: '01',
                label: '类型一'
              },
              {
                value: '02',
                label: '类型二'
              }
            ]
          }
        },
        {
          type: 'input',
          name: 'merchantName',
          label: '商户名称',
          value: '',
          props: {
            placeholder: '请输入'
          }
        },
        {
          type: 'select',
          name: 'organization',
          label: '组织机构',
          value: '',
          props: {
            placeholder: '请选择',
            optionList: [
              {
                value: '01',
                label: '机构一'
              },
              {
                value: '02',
                label: '机构二'
              }
            ]
          }
        }
      ],
      columns: [
        {
          title: '跳转周期',
          key: 'range',
          align: 'center',
        },
        {
          title: '收入确认类型',
          key: 'type',
          align: 'center',
        },
        {
          title: '场景',
          key: 'scene',
          align: 'center',
        },
        {
          title: '组织机构',
          key: 'organization',
          align: 'center',
        },
        {
          title: '商户名称',
          key: 'merchantName',
          align: 'center',
        },
        {
          title: '产品名称',
          key: 'productName',
          align: 'center',
        },
        {
          title: '调整销售金额',
          key: 'sales_amount',
          align: 'center',
        },
        {
          title: '调整优惠金额',
          key: 'discountAmount',
          align: 'center',
        },
        {
          title: '调整结算金额',
          key: 'settlementAmount',
          align: 'center',
        },
        {
          title: '调整服务成功笔数',
          key: 'services_total',
          align: 'center',
        },
        {
          title: '调整收入',
          key: 'income_amount',
          align: 'center',
        },
        {
          title: '平台应收（比例）',
          key: 'receivable_ratio',
          align: 'center',
        },
        {
          title: '平台应收（金额）',
          key: 'receivable_amount',
          align: 'center',
        },
        {
          title: '明细查询',
          key: 'detailed',
          align: 'center',
        }
      ]
    };
  },
  methods: {
    getCostSummary,
    uploadFile(row) {
      console.log('uploadFile row:', row);
    },
    exportExcel() {},
    beforeSearchSubmit(data) {
      const { date } = data
      const [startDate, endDate] = getDateRangeTimestamp(date)
      data.startDate = startDate
      data.endDate = endDate
      return omit(data, 'date')
    },
  }
};
</script>
